<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>文件上传</title>

    <link href="/statics/layui/css/layui.css" rel="stylesheet" />

    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript"></script>

</head>

<body>
<div class="layui-main">
    <form class="layui-form" method="post" action="javascript:;">
        <div class="layui-form-item">
            <label class="layui-form-label">文件上传</label>
            <div class="layui-inline">
                <div class="layui-upload-drag" id="upload">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>
            <div class="layui-inline" id="upload_preview"></div>
        </div>
        <div class="layui-form-item layui-hide" id="upload_progress">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="width:21%;">
                <div class="layui-progress" lay-showpercent="true" lay-filter="upload_progress">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide" id="upload_progress">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="width:21%;">
                <div class="layui-progress" lay-showpercent="true" lay-filter="upload_progress">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                </div>
            </div>
        </div>
        <table class="layui-table file-list layui-hide">
            <tr>
                <td>名称</td>
                <td>大小</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </table>
        <button class="layui-btn all-upload layui-hide">全部上传</button>
    </form>
</div>
</body>

</html>
<script>
    $(function() {
        layui.use([ 'layer', 'element', 'form', 'upload' ], function() {
            let layer = layui.layer,
                    element = layui.element,
                    form = layui.form,
                    upload = layui.upload;

            var files;
            let uploadInst = upload.render({
                elem : '#upload',
                url : '/cb/tourist/upload',
                data : {},
                accept : 'file',
                size : 1024 * 2,
                auto : false,
                bindAction : ".all-upload",
                multiple : true,
                choose : function(obj) {
                    files = obj.pushFile();
                    $(".file-list").removeClass("layui-hide");
                    $(".all-upload").removeClass("layui-hide");
                    obj.preview(function(index, file, result) {
                        let tr = $([ "<tr id='upload-" + index + "'>",
                            "<td>" + file.name + "</td>",
                            "<td>" + (file.size / 1024).toFixed(1) + "KB</td>",
                            "<td>等待上传</td>",
                            "<td>",
                            "<button class='layui-btn layui-mini file-reload layui-hide'>重新上传</button>",
                            "<button class='layui-btn layui-mini layui-btn-danger file-del'>删除</button>",
                            "</td>",
                            "</tr>" ].join(""));

                        tr.find(".file-reload").on("click", function() {
                            obj.upload(index, file);
                        })

                        tr.find(".file-del").on("click", function() {
                            delete files[index];
                            tr.remove();
                        })

                        $("table").append(tr);
                    });
                },
                allDone : function(obj) { //当文件全部被提交后，才触发
                    console.log(obj.total); //得到总文件数
                    console.log(obj.successful); //请求成功的文件数
                    console.log(obj.aborted); //请求失败的文件数
                },
                done : function(res, index, upload) { //上传后的回调
                    console.log(res); //得到总文件数
                    if (res.status == 200) { //上传成功
                        var tr = $("table").find('tr#upload-' + index),
                                tds = tr.children();
                        tds.eq(2).html("<span style='color:#5FB878;'>上传成功</span>")
                        tds.eq(3).html("<a href='"+res.msg+"'>点击跳转网页</a>"); //清空操作
                        delete files[index];
                        return;
                    }
                },
                error : function(index, upload) {
                    var tr = $("table").find('tr#upload-' + index),
                            tds = tr.children();
                    tds.eq(2).html("<span style='color:#FF5722;'>上传111失败</span>")
                    tds.eq(3).find(".file-reload").removeClass("layui-hide"); //清空操作
                }
            })
        })
    })
</script>
<!--<title>上传解压包</title>-->
<!--<form action="/cb/tourist/upload" method="post" enctype="multipart/form-data">-->
    <!--选择压缩包: <input type="file" name="file">-->
    <!--<input type="submit" value="上传">-->
<!--</form>-->